<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>锂塔二手回收</title>
  <style>
    body{
        margin: 0;
        padding: 0;
    }
    .login{
        display: flex;
        align-items: center;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        background-color: #2ecc71;
        overflow: hidden;
    }
    .login > .main{
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .login-left{
        position: relative;
        width: 500px;
        height: 365px;
        font-size: 18px;
    }

    .login-left img{
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .login-left .title{
        position: absolute;
        margin-top: 4px;
        margin-left: 30%;
        padding: 8px 43px;
        font-size: 20px;
        background-color: #fff;
        box-sizing: border-box;
    }

    .login-right{
        position: relative;
        margin-left: 24px;
        padding: 20px;
        width: 320px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 5px;
        box-shadow: 0px 4px 20px 0px rgba(39, 174, 96, .3);    
    }

    .login-right .box{
        position: relative;
        width: 100%;
        height: 100%;
    }

    .login-right .title{
        margin-bottom: 24px;
        text-align: center;
        font-size: 30px;
        color: #333333;
    }

    .tip{
        text-align: center;
        color: #fff;
        transition: all .3s;
    }

    #my-form > div{
        display: flex;
        gap: 12px;
        white-space: nowrap;
    }

    .my-input{
        box-sizing: border-box;
        margin-bottom: 24px;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.88);
        font-size: 14px;
        display: inline-block;
        width: 100%;
        height: 32px;
        min-width: 0;
        background-color: #ffffff;
        background-image: none;
        border-width: 1px;
        border-style: solid;
        border-color: #d9d9d9;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .my-input:focus { 
        outline: none; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); 
    }

    .my-button{
        font-size: 14px;
        width: 100%;
        height: 42px;
        margin: 24px auto;
        padding: 4px 15px;
        border-radius: 6px;
        color: #fff;
        background: #27ae60;
        box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
        outline: none;
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;    
    }

  </style>
</head>
<body>
<div class="login">
    <div class="main">
        <div class="login-left">
            <img src="./imgs/login-bg.png" alt="" />
            <div class="title">锂塔二手回收</div>
        </div>
        <div class="login-right">
            <div class="box">
                <div class="title">用户登录</div>
                <form id="my-form">
                    <div>
                        账号
                        <input class="my-input" type="text" placeholder="请输入账号">
                    </div>
                    <div>
                        密码
                        <input class="my-input" type="password" placeholder="请输入密码">
                    </div>
                </form>
                <div class="tip"></div>
                <button class="my-button" type="button" onclick="submit()">登录</button>
            </div>
        </div>
    </div>
</div>
  <script src="./js/login.js"></script>
</body>
</html>